<template>
  <!-- 小组件 —— 折线图 -->
  <div>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
      <div
        id="main"
        ref="main"
        style="width: 600px; height: 400px; border: 2px solid red"
      ></div>
    </el-card>
  </div>
</template>
<script>
// 1. 导入 echarts
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  // 在 mounted 中 ，页面的元素已经渲染完毕
  async mounted() {
    // 3. 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.main)

    // 4. 指定图表的配置项和数据
    var option = {
      backgroundColor: '#2c343c',
      title: {
        text: 'ECharts 入门示例'
      },
      textStyle: {
        color: 'rgba(255, 255, 255, 1)'
      },
      tooltip: {},
      legend: {
        data: ['销量', '标签']
      },
      // x 轴内容
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      //  y 轴内容
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '销量',
          type: 'line',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '标签',
          type: 'bar',
          data: [5, 10, 30, 5, 30, 50]
        },
        {
          name: '标签',
          type: 'line',
          data: [5, 10, 30, 5, 30, 50]
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(Object.assign(option))
  },
  methods: {}
}
</script>
